<template>
    <div id="footer">
        <router-link to="/">
            <div>
                <div class="img">
                    <img src="./../../static/img/index.png" alt="">
                </div>
                <p>首页</p>
            </div>
        </router-link>

        <router-link to="/quanzi">
            <div>
                <div class="img">
                    <img src="./../../static/img/quanzi.png" alt="">
                </div>
                <p>圈子</p>
            </div>
        </router-link>
            <div @click="animate">
                <div class="add">
                    <img src="./../../static/img/add.png" alt="">
                </div>
            </div>

        <router-link to="/">
            <div>
                <div class="img">
                    <img src="./../../static/img/wenda.png" alt="">
                </div>
                <p>问答</p>
            </div>
        </router-link>

        <router-link to="/me">
            <div>
                <div class="img">
                    <img src="./../../static/img/me.png" alt="">
                </div>
                <p>我的</p>
            </div>
        </router-link>
        <tanchu :parent_value="flag2" :id="name"></tanchu>
    </div>
</template>
<style>
    p{
        margin: 0;
    }
    a:hover{
        text-decoration: none;
    }
    #footer{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #eaeaea;
    }
    .active{
       color:#ff005c !important;
    }
    #footer>a>div{
        color: #4e4c4c;
        padding: .2em;
        font-size: .9em;
        text-align: center;
    }
     #footer>div>.add{
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    #footer>a>div>.img{
        width: 20px;
        height: 20px;
        margin: 0 auto;
    }
    
     #footer>div>.add>img{
        width: 100%;
        height: 100%;
    }
    #footer>a>div>.img>img{
        width: 100%;
        height: 100%;
    }
    /* #list_box{
        width: 100%;
        position: fixed;
        bottom: 50px;
        left: 0;
        padding: .5em;
    }
    .fadeIn1{
        display: block
    }
    .fadeOut1{
        display: none;
    }
    #list_box>a>.list{
        display: flex;
        align-items: center;
        padding: .5em;
        margin-bottom: .5em;
      
    }
    #list_box>a{
        border-radius: .5em;
    }
    #list_box>a:nth-child(1){
        display: block;
        background: #82c12f;
    }
    #list_box>a:nth-child(2){
        display: block;
        background: #f18905;
    }
    #list_box>a>.list>.list_img{
        width: 50px;
        height: 50px;
        margin-right: 1em;
    }
    #list_box>a>.list>.list_img>img{
        width: 100%;
    }
    .list>.text{
        font-weight: bolder;
        color: #fff;
    }
    .list>.text>p>.span{
        color: #d8d3d3;
    } */
</style>
<script>
import tanchu from '@/components/tanchu.vue'
export default {
    data(){
        return {
            dbx:0,
            flag2:false,
            name:'0'
        }
    },
    props:["parent_value",'id'],
    components:{
        tanchu
    },
    mounted(){
        // this.active()
    },
    methods:{
        animate(){
            this.flag2 = !this.flag2;
        }
    }
}
</script>
